<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading......</title>
    <script src = "../static/js/util/jquery.js"></script>
    <style>
        .container{
            position:absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .progress{
            stroke-dasharray: 627;
            stroke-dashoffset: 0;
        }
    </style>
</head>
<body>
        <svg width="300" height="300" class="container">
            <circle cx="150" cy="150" r="100" fill="white" stroke="pink" stroke-width="20" class="progress"></circle>
            <text x="150" y="150" fill="black" text-anchor="middle" alignment-baseline="middle">loading......</text>
        </svg>

        <script>
            const progress = document.querySelector(".progress");
            const total = progress.getTotalLength();
            const timer = setInterval(()=>{
                progress.style.strokeDashoffset = progress.style.strokeDashoffset - total/10;
            },1000)
            $.ajax({
                type: 'get',
                url: '/freshData',
                data: {},
                success: function (resData) {
                    console.log("aaa");
                    console.log(resData);
                    if(resData["res"] == "over"){
                        location.href="/main"
                    }
                }, error: function () {
                    console.log("这个接口挂了");
                }
            })
        </script>
</body>
</html>